<template>
	<view class="container">
		<carHeader :title="title"></carHeader>
		<view>
			<uni-group mode="card" class="firstGroup">
				<!-- 流程图 -->
				<view class="bzt">
					<view class="bluey">预约服务</view>
					<view class="greedy">支付订单</view>
					<view class="redy">门店服务</view>
				</view>
				<!--定位，订单人，预约时间，预约车辆  -->
				<view>
					<uni-list :border="false">
						 <uni-list-item
						 :title="shop.name" 
						 thumb="/static/车联网服务-04汽车保养-06确认订单_slices/商家.png" 
						 :note="shop.address"
						 :border="false"
						 thumb-size="sm">
						  </uni-list-item>
						  
						  <uni-list-item
						  :title="user.name" 
						  thumb="/static/车联网服务-04汽车保养-06确认订单_slices/人员.png" 
						  :rightText="user.phone"
						  :border="false"
						  thumb-size="sm">
						   </uni-list-item>
						   
						   <uni-list-item :border="false" title="立即预约" thumb="/static/车联网服务-04汽车保养-06确认订单_slices/车辆-01.png" thumb-size="sm"
							clickable @click="disponment">
								<template v-slot:footer>
										<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png" mode="widthFix"></image>
								</template>
						   </uni-list-item>
						   
						   <uni-list-item :border="false" 
						   :title="scar.type" 
						   thumb="/static/车联网服务-04汽车保养-06确认订单_slices/车辆-01@2x(1).png"
							thumb-size="sm" 
							clickable >
							<template v-slot:footer>
								<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png" mode="widthFix"></image>
							</template>
						   </uni-list-item>
					</uni-list>
				</view>
				<!-- 产品服务 -->
				<view class="ddxx">
					<uni-list :border="false">
						<uni-list-item :border="false" title="产品服务">
							<template v-slot:footer>
								<font class="fwcp">共选择<font class="dsx">{{ids.length}}项</font>服务产品
								</font>
							</template>
						</uni-list-item>
						<uni-list-item :border="false" v-for="(item,index) in spList" :title="item.name">
							<template v-slot:footer>
								<font class="qian">￥{{item.money}}</font>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<!-- 代金券 -->
				<view>
					<uni-list :border="false">
						<uni-list-item :border="false" title="代金券/优惠卷" thumb="/static/车联网服务-04汽车保养-06确认订单_slices/优惠券.png" thumb-size="sm"
							clickable >
							<template v-slot:footer>
								<!-- <text class="qian">-{{djq[1].money}}元</text> -->
								<text class="qian">-10元</text>
								<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png" mode="widthFix"></image>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</uni-group>
			
			<view class="tjdd">
				<uni-list :border="false">
					<uni-list-item :border="false">
						<template v-slot:header>
							<view class="slot-box" @click="lxkf">
								<image  src="/static/车联网服务-04汽车保养-06确认订单_slices/客服.png" mode="widthFix"></image>
								<text class="slot-text">联系客服</text>
							</view>
						</template>
						<template v-slot:footer>
							<font class="hjje" >合计：￥{{num}}元</font>
							<button type="primary" size="mini" class="tjan" @click="tjdd">提交订单</button>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			
			
		</view>
		<!--预约弹出框  -->
		<uni-popup ref="inputDialog" type="dialog">
			<view class="ddxx yysjtck">
				<uni-list :border="false">
					<uni-list-item>
						<template v-slot:body>
							<view style="text-align: center;width: 100%;">
								<view style="color: black;">预约时间</view>
								<view style="opacity: 0.7;">
									<uni-dateformat :date="now"></uni-dateformat>
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="false">
						<template v-slot:body>
							<uni-datetime-picker 
							type="datetime" 
							v-model="time" 
							@change="changeLog" />
						</template>
					</uni-list-item>
					
					<uni-popup-dialog title=" " 
					:before-close="true" 
					@close="close"
					@confirm="confirm">
					</uni-popup-dialog>
					
				</uni-list>
			</view>
		</uni-popup>
		
		<!-- 联系客服底部弹出框 -->
		<uni-popup ref="customerService" type="bottom" background-color="#fff">
			<uni-list :border="false">
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;">{{customerService.phone}}</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;" @click="copy">复制</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;" clickable @click="qxbh">取消拨号</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
		<!-- 提交订单 -->
		<uni-popup ref="submit" background-color="#fff">
			
			<view class="zhifu">
				<view class="qsmm">
					<uni-icons type="closeempty" size="15" @click="gbdd" style=""></uni-icons>
					<view style="margin-left: 160rpx;" class="clos">请输入密码</view>
				</view>
				
				<view style="width: 640rpx; height: 200rpx; margin-top: 30rpx;" background-color="#fff">
					<view style="width: 580rpx; height: 200rpx; margin: 0 30rpx; text-align: center;border-bottom: 4rpx #eee solid;">
						<view>车辆服务平台</view>
						<view style="font-size: 70rpx;margin-top: 25rpx;">￥{{num}}</view>
					</view>
				</view>
				
				<view class="mima">
					<view class="fukuan">
						<view>支付方式</view>
						<view>零钱<uni-icons type="right" size="15" @click="gbdd" color="#858585"></uni-icons></view>
					</view>
					
					<view class="input-wrap" style="font-size: 42rpx;">
						<!-- 页面显示  加密形式 给此input加上 password="true" 属性-->
						 <input class="input1" type="number" v-for="(item, index) in input_len" @tap="onInput"
							:key="index" :value="input_val.length >= index + 1 ? input_val.length : ''" /> 
						<!-- 实际监听 -->
						<input class="input2" v-if="isFocus" @blur="blurInput" @input="setInput" v-model="input_val"
								:maxlength="input_len" :focus="true" />
					</view>
				</view>
				
			</view>
				
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"确认订单",
				// 门店信息
				shop: {
					id: 1,
					name: "伟业汽车美容店(人民路店)",
					address: "山阳区人民中路33号"
				},
				// 用户信息
				user: {
					id: 1,
					name: "张先生",
					phone: "18656894566"
				},
				customerService: {
					id: 1,
					name: "客服1👌",
					phone: "13569798541"
				},
				// 选中的车辆信息
				scar: {
					id: 1,
					type: "奔驰FWE4/豫A56487"
				},
				spList: [{
						id: 1,
						name: '日式水晶打蜡',
						money: 199
					},
					{
						id: 2,
						name: '车身去氧化',
						money: 199
					},
					{
						id: 3,
						name: '轮胎补气',
						money: 199
					}
				],
				ids: [],
				num: 0,
				djq: [{
					id: 1,
					money: 10
				}, {
					id: 2,
					money: 10
				}],
				now: Date.now(),
				// 时间
				time: '',
				// 输入密码
				input_len: 6, // 验证码长度
				input_val: '', // 验证码的值
				isFocus: false,
				
			};
			
		},
		methods:{
			disponment(){
				this.$refs.inputDialog.open();
			},
			close() {
				this.time = '';
				this.$refs.inputDialog.close();
			},
			confirm(value){
				console.log(value)
				this.$refs.inputDialog.close();
			},
			changeLog(e) {
				this.time = e
			},
			lxkf(){
				this.$refs.customerService.open();
			},
			qxbh(){
				this.$refs.customerService.close();
			},
			copy(){
				uni.setClipboardData({
					data: this.customerService.phone,
					success: function () {
						console.log('success');
					}
				});
				this.$refs.customerService.close();
			},
			tjdd(){
				this.$refs.submit.open();
			},
			gbdd(){
				this.$refs.submit.close();
			},
			
			onInput() {
				this.isFocus = true;
			},
			blurInput() {
				this.isFocus = false;
			},
			setInput(e) {
	
				this.input_val = e.detail.value;
				
				if (this.input_val.length == 6) {
					uni.navigateTo({
						url: ""
					})
				}
			},
			
		}
		
	}
</script>

<style lang="scss">
	.bzt{
		width: 100%;
		height: 100rpx;
		display: flex;
		position: relative;
		background-color: transparent; 
		justify-content: space-between;
		border-bottom: 5rpx #eee solid;
		margin: 20rpx 0;
		padding: 20rpx 0rpx;
	}

	
	.bluey {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background-image: linear-gradient(#3688fe, #0A64E7);
	}
	
	 .greedy {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #fff;
		background-image: linear-gradient(#17E5B8, #01C278);
	}
	
	.redy {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #fff;
		background-image: linear-gradient(#FF9572, #F4410A);
	}
	
	.firstGroup{
		position: relative;
		top: -200rpx;
	}
	.slot-image{
		width: 20rpx;
		height: 20rpx;
	}
	.tjdd {
		position: fixed;
		// margin: 30rpx auto;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		image{
			margin-right: 10px;
			width: 30px;
			height: 30px;
		}
		.hjje{
			margin: auto 20rpx;
			color: #F4410A;
		}
	}
	.zhifu{
		width: 640rpx;
		height: 600rpx;
		text-align: center;
		
		
		.qsmm{
			position: relative;
			width: 640rpx;
			display: flex;
			padding: 20rpx 10rpx;
			.clos{
				width: 40%;
				position: absolute;
				font-size: 40rpx;
			}
		}
		
	}
	
	.mima{
		width: 580rpx; 
		height: 200rpx;
		margin: 0 30rpx;
		.fukuan{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			color: #ccc;
		}
	}
	
	.input-wrap {
		// margin-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.input1 {
		width: 70rpx;
		height: 70rpx;
		background-color: #eee;
		border-radius: 10rpx;
		justify-content: center;
		text-align: center;
	}
	
	.input2 {
		height: 0;
		width: 0;
	}
</style>
